<template>
	<view class="page">
		<view class="header">
			<view class="input-view">
				<uni-icon type="search" size="22" color="#ffffff"></uni-icon>
				<view class='cuIcon-search'></view>
				<input v-model="searchText" confirm-type="搜索" @input="onInput" class="input" type="text" placeholder="输入单号搜索" />
			</view>
		</view>
		<!-- <view class="header">
			<view class="input-view">
				<text class="cuIcon-search"></text>
				<input name="ltxa1" v-model="ltxa1" placeholder="请选择工序" />
			</view>
		</view> -->
		<view class="cu-form-group">
			<view class="title"><text>工序:</text></view>
			<picker @change="bindGongxuChange" :value="indexGongxu" :range="gongxuPickerList">
				<view class="picker">{{gongxuPickerList[indexGongxu]}}</view>
			</picker>
		</view>
		<view class="cu-card dynamic" v-for="(item,index) in productList" :key="index" @tap="goDetail(item)">
			<view class="cu-item shadow">
				<view class="list-text-top">
					<text>{{item.matnr}}</text>
					<text v-if="afs">{{item.colorName==null?'':item.colorName}} {{item.sizeName==null?'':item.sizeName}}</text>
					<text>{{item.psmng}}</text>
					<!-- <text>{{item.ltxa1}}</text> -->
				<!-- </view>
				<view class="list-text-bottom"> -->
					<!-- <text> 产品名称：{{item.matnr}}</text> -->
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState(['companyCode'])
		},
		data() {
			return {
				title: '下拉刷新 + 加载更多',
				data: [],
				productList: [],
				pageNo: 1,
				endFlag: false,
				filter: "",
				loadMoreText: "加载中...",
				showLoadMore: false,
				selFlag: false,
				gongxuPickerList:['请选择'],
				gongxuList:[],
				indexGongxu:0,
				searchText: "",
				afs: false,
				date: new Date().toISOString().slice(0, 10)
			};
		},

		onShow() {
			this.productList = [],
			this.pageNo = 1,
			this.filter = "",
			this.endFlag = false,
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
			this.getGongxuList();
			if (uni.getStorageSync("industry") == 'afs') {
				this.afs = true
			}
			// this.initData();
		},
		onLoad(e) {
			this.selFlag = e.selFlag;
		},
		onUnload() {
			this.max = 0,
				// this.data = [],
				this.productList = [],
				this.pageNo = 1,
				this.filter = "",
				this.endFlag = false,
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
		},
		onReachBottom() {
			console.log("onReachBottom");
			console.log("endflag" + this.endFlag)
			if (this.endFlag == true) {
				this.loadMoreText = "已显示全部数据"
				return;
			}
			this.showLoadMore = true;
			setTimeout(() => {
				//	this.pageNo = this.pageNo + 1;
				// this.getList()
			}, 300);
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		methods: {
			initData() {
				// 				uni.showLoading({
				// 					title: '加载中',
				// 					mask: false
				// 				});
				setTimeout(() => {
					// this.getList();
					uni.stopPullDownRefresh();
				}, 300);
			},
			getGongxuList() {
				let url = '/mcOperation/mcOperation/list2'
				this.$http.get(url, {
					params: {
						pageSize : 30
					}
				}).then(res => {
					if (res.data.success) {
						this.gongxuList=[];
						let operationCode = uni.getStorageSync("operationCode");
						let i = 0;
						res.data.result.records.forEach(item => {
							this.gongxuPickerList.push(item.operationName)
							this.gongxuList.push(item)
							i++
							if (operationCode !== null & operationCode == item.operationCode){
								this.indexGongxu = i;
							}
						})
						this.getList()
					}
				}).catch(err => {
					console.log(err);
				});
				
			},
			getList() {
				let url = '/confirmation/confirmation/listWorkBench'
				let i = this.indexGongxu - 1;
				console.log(this.gongxuList[i].operationCode)
				this.$http.get(url, {
					params: {
						vornr:this.gongxuList[i].operationCode,
						pageSize: "50",
					}
				}).then(res => {
					if (res.data.success) {
						console.log("success");
						console.log(res.data.result.records)
						this.productList = res.data.result.records;
					}
				}).catch(err => {
					console.log(err);
				});
			
			},
			goDetail: function(e) {
				if (this.selFlag) {
					let  detailData = {
						"dispatchNo": e.dispatchNo,
					}
					uni.setStorageSync('detailData', detailData);
					uni.navigateBack({
						delta: 1
					});
			
				} else {
					uni.navigateTo({
						url: "danjianUpdata?item=" + JSON.stringify(e)
					})
				}
			},
			bindGongxuChange: function(e) {
				this.indexGongxu = e.target.value
				if (this.indexGongxu == 0){
					this.productList = [];
				} else {
					let i = this.indexGongxu - 1;
					uni.setStorageSync('operationCode', this.gongxuList[i].operationCode);
					this.getList();
				}
			},
			
			postSearch(e) {
				this.productList = [];
				this.endFlag = false;
				this.pageNo = 1;
				this.filter = e.detail.value;
				this.loadMoreText = "加载更多",
					this.getList();
			}
		}
	}
</script>
<style>
	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
		background-color: #314054;
	}
	
	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #414f61;
		height: 30px;
		border-radius: 15px;
		padding: 0 10px;
		flex: 1;
	}
	.cu-card>.cu-item {
		display: block;
		background-color: #ffffff;
		overflow: hidden;
		border-radius: 10upx;
		margin: 10upx;
	}

	.cu-card.dynamic>.cu-item>.text-content {
		margin-bottom: 1px;
		margin-top: 6px;
	}

	.date {
		width: 800rpx;
		height: 250rpx;
		text-align: center;
		background-color: #3071FF;
		color: #FFFFFF;
		word-break: break-all;
	}
	.list-text-top {
		margin-top: 6px;
		margin-left: 2px;
		margin-right: 2px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		/* width: 100%; */
		/* height:30px; */
		/* line-height: 36rpx; */
		font-size: 30rpx;

	}
	/* .uni-media-list-text-top>.text{
		margin: 10rpx;
	} */
	.list-text-bottom {
		margin-bottom: 6px;
		margin-left: 2px;
		margin-right: 2px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 30rpx;
		/* color: #8f8f94; */
	}
	
	
	/* .text{
		margin-top: 10rpx;
		margin-buttom: 10rpx;
		word-break: break-all;
		color: #FFFFFF;
	} */
</style>

